<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="content-Type" content="text/html;charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="description" content="同乡烩后台管理系统"/>
  <title>同乡烩后台管理系统</title>
  <link rel="stylesheet" th:href="@{/css/reset.css}"/>
  <link rel="stylesheet" th:href="@{/css/main.css}"/>
  <link rel="stylesheet" th:href="@{/css/list.css}"/>
  <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
  <script type="text/javascript">
    function getFileUrl(sourceId) {
      var url;
      if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
        url = document.getElementById(sourceId).value;
      } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
      } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
      }
      console.log(url);
      return url;
    }

    /**
     * 将本地图片 显示到浏览器上
     */
    function preImg(sourceId, targetId ,otherId) {
      var url = getFileUrl(sourceId);
      var imgPre = document.getElementById(targetId);
      var sour = document.getElementById(sourceId);
      imgPre.src = url;
      var image = document.getElementById(otherId);
      image.value=sour.files[0].name;
    }

    $(function () {
      var body_height = $(document).height();
      $(".main").css("height", body_height + "px");
      var val = $("#imgOne").val();
    })
  </script>
</head>
<!--菜品添加  -->
<body>
<div class="main">
  <div th:replace="admin/admin-left::left"/>
  <div class="main-left"></div>
  <!-- 展示 -->
  <div class="main-right">
    <div class="main-right-header"></div>
    <div class="main-right-navs">
      <a href="#">管理首页</a><a class="split">/</a><a>菜品管理</a><a>/</a><a>菜品修改</a>
    </div>
    <div class="margin-right-container margin-right-container1">
      <div class="section  section2">
        <div class="margin-right-container-nav margin-right-container-nav2 " style="height: 20rem">
          <img id="imgPre" th:src="@{/images/}+${dishes.getImage()}"/>
        </div>
        <div class="margin-right-container-nav margin-right-container-nav2 margin-right-container-nav4">
          <div class="input-group">
            <input onchange="preImg(this.id,'imgPre','imageName');" name="imgOne" id="imgOne" type="file"/>
          </div>
          <form class="form" th:action="@{/updateDishes}" method="post" enctype="multipart/form-data">
            <input type="text" name="foodid" th:value="${dishes.getFoodid()}" style="display:none" />
            <input type="text" name="image" id="imageName" th:value="${dishes.getImage()}" style="display:none" />
            <div class="input-group">
              <div class="input-group-left">菜品名称：</div>
              <input class="input-group-right" name="name" type="text" placeholder="菜品名称" th:value="${dishes.getName()}" required/>
              <div class="clear"></div>
            </div>
            <div class="input-group">
              <div class="input-group-left">价格：</div>
              <input class="input-group-right" name="price" type="text" placeholder="价格" th:value="${dishes.getPrice()}" required/>
              <div class="clear"></div>
            </div>
            <div class="margin-right-container-nav5">
              <button type="submit" class="sure">确认</button>
            </div>
          </form>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>
